<template>
	<view class="">
		<xl-category
			title="模板"
			:data="categorys"
			:cascade="2"
			color="#0a93ff"
			background="#f6f6f6"
			:reduceHeight="284"
		/>
		<xl-tabbar></xl-tabbar>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	// 分类数据，可将所有分类数据放置categorys，多级可用children属性
	// 若不一次性将多级数据请求，可不写children，则会触发rightApi向后端请求，或者不写rightApi，可触发loadRight事件，父组件中请求二级分类数据
	// 甚至可以不传该数据，配置leftApi，组件中会自动请求一级分类数据
	const categorys = ref([
		{id: '1', name: '搜索模板', children: [
			{id: '11', name: '搜索页面', img: '/static/imgs/logo.png', url: 'searchPage'},
		]},
		{id: '2', name: '类目模板', children: [
			{id: '21', name: '级联部件', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '22', name: '分类页面', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '3', name: '地址模板', children: [
			{id: '31', name: '地址编辑', img: '/static/imgs/logo.png', url: 'addressEdit'},
			{id: '32', name: '地址列表', img: '/static/imgs/logo.png', url: 'address'},
		]},
		{id: '4', name: '商品模板', children: [
			{id: '41', name: '商品页面', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '5', name: '规格模板', children: [
			{id: '51', name: '导航部件', img: '/static/imgs/logo.png', url: 'goodsNav'},
      {id: '52', name: '规格部件', img: '/static/imgs/logo.png', url: 'spec'},
			{id: '53', name: '规格弹窗', img: '/static/imgs/logo.png', url: 'specPopup'},
		]},
		{id: '6', name: '登录模板', children: [
			{id: '61', name: '规格部件', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '62', name: '规格弹窗', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '7', name: '个人中心', children: [
			{id: '71', name: '规格部件', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '72', name: '规格弹窗', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '8', name: '订单模板', children: [
			{id: '81', name: '规格部件', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '82', name: '规格弹窗', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '9', name: '评价评论', children: [
			{id: '91', name: '评价页面', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '92', name: '评论部件', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '10', name: '地图模版', children: [
			{id: '101', name: '评价页面', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '102', name: '评论部件', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '11', name: '聊天模版', children: [
			{id: '111', name: '评价页面', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '112', name: '评论部件', img: '/static/imgs/logo.png', url: 'category'},
		]},
		{id: '12', name: '优惠券模版', children: [
			{id: '121', name: '评价页面', img: '/static/imgs/logo.png', url: 'cascade'},
			{id: '122', name: '评论部件', img: '/static/imgs/logo.png', url: 'category'},
		]}
	])
	
</script>

<style lang="scss" scoped>
	
</style>